<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #top {
        width: 500px;
        height: 500px;
        border: 1px pink solid;
        margin: 20px auto;
        text-align: center;
      }
      #biaoti {
        width: 400px;
        height: 30px;
        margin-bottom: 20px;
      }
      #textcon {
        width: 370px;
        height: 300px;
        resize: vertical;
      }
      .s1 {
        vertical-align: top;
      }
      #name {
        width: 400px;
        height: 30px;
        margin-top: 20px;
      }
      #con {
        border: 1px skyblue solid;
        width: 1500px;
        margin: 20px auto;
        /* text-align: center; */
      }
      h3 {
        width: 100px;
        display: inline-block;
      }
      #liuyanren {
        font-size: 20px;
      }
      .lie {
        text-align: center;
      }
      .nei {
        width: 1500px;
        /* height: 400px; */
        line-height: 50px;
      }
      #time {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div id="top">
      <h2>留言板</h2>
      标题：<input id="biaoti" type="text" placeholder="请输入标题" /><br />
      <span class="s1"> 留言内容：</span
      ><textarea name="" id="textcon" cols="30" rows="10"></textarea>
      <p>留言人：<input id="name" type="text" placeholder="请输入昵称" /></p>
      <p><button id="fbBtn">发布留言</button></p>
    </div>
    <div id="con">
      <h2 class="lie">留言列表</h2>
      <hr />
      <div class="nei">
        <h3>留言人：</h3>
        <span id="liuyanren">李四</span><br />
        <h3>留言标题：</h3>
        <span id="lybt">李四</span><br />
        <h3>留言内容：</h3>
        <span id="lynr">李四</span><br />
        <p id="time">123<a href="#">删除</a></p>
        <hr />
      </div>
    </div>
    <script>
      window.onload = function () {
        document.getElementById("fbBtn").onclick = fb;
      };
      // 添加留言
      function fb() {
        var name = document.getElementById("name").value;
        var title = document.getElementById("biaoti").value;
        var content = document.getElementById("textcon").value;
        if (!name || !title || !content) {
          alert("请填写完整信息");
          return;
        }
        var data = {
          title: title,
          name: name,
          content: content,
        };
        Ajax(
          "post",
          "https://liu.zzgoodqc.cn/lyb/add",
          function (res) {
            if (res.code == 200) {
              alert("添加成功");
              lyCon();
            } else {
              alert("请重新添加");
            }
          },
          data
        );
      }
      // 删除接口
      function del(id) {
        console.log(id);
        Ajax("get", `https://liu.zzgoodqc.cn/lyb/del?id=${id}`, function (res) {
          lyCon();
        });
      }
      // 查看所有留言
      function lyCon() {
        Ajax("get", "https://liu.zzgoodqc.cn/lyb/list", function (res) {
          console.log(res);
          var obj = res.data;
          obj.sort(function (a, b) {
            return b.id - a.id;
          });
          console.log(obj);
          var boxhtml = "";
          for (let i = 0; i < obj.length; i++) {
            var ne = `
            <h3>留言人：</h3>
            <span id="liuyanren">${obj[i].name}</span><br />
            <h3>留言标题：</h3>
            <span id="lybt">${obj[i].title}</span><br />
            <h3>留言内容：</h3>
            <span id="lynr">${obj[i].content}</span><br />
            <p id="time">${obj[i].created_at}<a href="#" onclick="del(${obj[i].id})">删除</a></p>
            <hr />
            `;
            boxhtml += ne;
          }
          var box = document.querySelector(".nei");
          console.log(box);
          box.innerHTML = boxhtml;
        });
      }
      lyCon();
      // 封装Ajax
      function Ajax(type, url, fun, data = null) {
        // 创建Ajax对象
        var http = new XMLHttpRequest();
        // 设置
        http.open(type, url, true);
        http.onreadystatechange = function () {
          if (http.readyState == 4 && http.status == 200) {
            fun(JSON.parse(http.responseText));
          }
        };
        if (type.toLowerCase() == "post") {
          http.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
          );
          if (data) {
            var str = "";
            for (let i in data) {
              str += i + "=" + data[i] + "&";
            }
            str = str.slice(0, -1);
          }
          http.send(str);
        } else {
          http.send();
        }
      }
    </script>
  </body>
</html>
